
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- less是css的预处理语言 less是css增强版，编写更少的代码实现更强大的样式 -->
		 <div class="box1">123</div>
		 <div class="box2">123</div>
		 <div class="box3">123</div>
	</body>
</html>
<style type="text/css">
	html{
		/* css原生也支持变量设置 */
		--color:#ff0000;
		--length:100px;
	}
	.box1{
		/* calc()计算函数 */
		width: calc(1000px/2);
		height: var(--length);
		background-color: var(--color);
	}
	.box2{
		width: var(--length);
		height: var(--length);
		color: var(--color);
	}
	.box3{
		width: var(--length);
		height: var(--length);
		border: 10px solid var(--color);
	}
</style>